<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				境友申请
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="scroll-item">
			<view class="item-right">
				<view class="avatar-container">
					<image :src="thisUser.avatar" mode=""></image>
				</view>
				<view class="right_body">
					<view class="title_box">
						<view class="nickname-and">
							<text class="nickname textOverflow">{{thisUser.nick_name}}</text>
						</view>
						<view class="img-sex" v-if="thisUser.sex == 1">
							<image class="image_box" src="../../../static/man.png"></image>
						</view>
						<view class="img-sex" v-if="thisUser.sex == 2">
							<image class="image_box" src="../../../static/woman.png"></image>
						</view>
						<view class="authentication_box" v-if="identity_auth">
							已认证
						</view>
						<view class="authentication_box2" v-if="!identity_auth">
							未认证
						</view>
						<view class="authentication_box" v-if="identity_auth">
							境外身份
						</view>
						<view class="authentication_box2" v-if="!identity_auth">
							境内身份
						</view>
					</view>
					<view class="common_ys textOverflow" v-if="thisUser.signature == null">
						签名:此用户很懒，没有签名。
					</view>
					<view class="common_ys textOverflow" v-if="thisUser.signature !== null">
						{{thisUser.signature}}
					</view>
					<view class="common_ys textOverflow">
						故乡:{{thisUser.hometown}}
						<view class="guanxi">{{thisUser.searchParam}}</view>
						<view class="">{{thisUser.distance}}km</view>
					</view>
				</view>
			</view>
			<image class="right" src="../../../static/right.png" mode=""></image>
		</view>
		<view class="body_mid">
			<view class="mid_item">
				<view class="text1">附加消息</view>
				<text class="text2">{{AddWording}}</text>
			</view>
			<view class="mid_item">
				<view class="text1">来源</view>
				<text class="text2">境友查找</text>
			</view>
		</view>
		<view class="body_bottom">
			<view class="btn1" @tap="responseFriend(refuse)">
				拒绝
			</view>
			<view class="btn2" @tap="responseFriend(Agree)">
				同意
			</view>
		</view>
	</view>
</template>

<script>
	import webim from '../../../common/webim_wx.min.js' //腾讯云im包
	// import webimhandler from '../../../common/webim_handler.js' //这个是所有事件的腾讯js，这个页面需要用到登录
	export default {
		data() {
			return {
				myID: '',
				userID: '',
				thisUser: {},
				AddWording: '',
				refuse : 'Response_Action_Reject',
				Agree : 'Response_Action_AgreeAndAdd'
			};
		},
		onLoad(option) {
			// console.log(option.id)
			this.AddWording = option.AddWording
			// console.log(this.AddWording)
			this.userID = parseInt(option.id)
			this.getUserDetail()
			this.myID = JSON.stringify(uni.getStorageSync('user_id'))
			console.log(this.myID)
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},

			getUserDetail() {
				var that = this;
				var data = {
					id: this.userID
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'findById',
					data: data,
					successBack: function(res) {
						that.thisUser = res.data.data
						console.log(that.thisUser)
					}
				})
			},
			responseFriend(responseType) {
				console.log(responseType)
				var response_friend_item = [{
					'To_Account': JSON.stringify(this.userID),
					"ResponseAction": responseType
				}];
				var options = {
					'From_Account': this.myID,
					'ResponseFriendItem': response_friend_item
				};

				webim.responseFriend(
					options,
					function(resp) {
						console.log(resp)
						if(resp.ActionStatus == 'OK'){
							uni.showToast({
								title: "添加好友成功",
								icon: 'none'
							})
							uni.navigateBack({
								delta: 1
							})
							// 添加好友成功
						}
						//在表格中删除对应的行
						//             $('#get_pendency_table').bootstrapTable('remove', {
						//                 field: 'To_Account',
						//                 values: [$("#rf_to_account").val()]
						//             });
						//             $('#response_friend_dialog').modal('hide');
						// 
						//             if (response_friend_item[0].ResponseAction == 'Response_Action_AgreeAndAdd') {
						//                 //getAllFriend(getAllFriendsCallbackOK);
						//             }
						// 
						//             alert('处理好友申请成功');
					},
					function(err) {
						console.log(err)
						// alert(err.ErrorInfo);
					}
				);
			}
		},
		// 		created(){
		// 			
		// 		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 128upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;

	}

	.head_right {
		width: 150upx;
	}

	.guanxi {
		margin-left: 10upx;
		margin-right: 10upx;
	}

	.scroll-item {
		height: 125upx;
		padding: 30upx 40upx;
		border-bottom: 1upx solid #F3F3F3;
		background: #fff;
		position: relative;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title_box {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: flex-start;
	}

	.item-right {
		display: flex;
		align-items: center;
	}

	.avatar-container {
		width: 125upx;
		height: 125upx;
		float: left;
		position: relative;
		margin-right: 30upx;
	}

	.avatar-container image {
		width: 100%;
		height: 100%;
		border-radius: 5upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar-container .country {
		width: 33upx;
		height: 33upx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.time {
		height: 24upx;
		width: 84upx;
		line-height: 24upx;
		color: #FFFFFF;
		font-size: 14upx;
		background: #999999;
		border-radius: 24upx;
		padding-left: 30upx;
		position: absolute;
		left: 10upx;
		bottom: 0upx;
		opacity: 0.8;
	}


	.item-main {
		height: 125upx;
	}

	.nickname-and {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nickname {
		max-width: 200upx;
		font-size: 30upx;
		line-height: 40upx;
		margin-right: 10upx;
	}

	.img-sex {
		margin-right: 10upx;
	}

	.image_box {
		width: 35upx;
		height: 37upx;
	}

	.authentication_box {
		border: 1upx solid #33cbcc;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 23upx;
		height: 25upx;
		font-size: 16upx;
		color: #33cbcc;
		padding: 0 5upx;
		margin-right: 10upx;
	}

	.authentication_box2 {
		border: 1upx solid #8E8F9F;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 23upx;
		height: 25upx;
		font-size: 16upx;
		color: #8E8F9F;
		padding: 0 5upx;
		margin-right: 10upx;

	}




	.common_ys {
		width: 400upx;
		font-size: 26upx;
		line-height: 40upx;
		color: #404a4c;
		display: flex;
	}

	.right {
		width: 16upx;
		height: 28upx;

	}

	.body_mid {
		margin-top: 20upx;
		background: #FFFFFF;
		font-size: 32upx;
	}

	.mid_item {
		height: 88upx;
		padding: 0 24upx;
		line-height: 88upx;
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		align-items: center;
	}

	.text1 {
		color: #999999;
		width: 170upx;
	}

	.text2 {
		color: #333333;
	}

	.body_bottom {
		margin-top: 60upx;
		display: flex;
		justify-content: space-between;
		padding: 0 24upx;
		font-size: 32upx;
	}

	.btn1 {
		height: 78upx;
		width: 336upx;
		background: #FFFFFF;
		color: #333333;
		border-radius: 10upx;
		line-height: 78upx;
		text-align: center;
	}

	.btn2 {
		height: 78upx;
		width: 336upx;
		background: #33CBCC;
		color: #FFFFFF;
		border-radius: 10upx;
		line-height: 79upx;
		text-align: center;
	}
</style>
